<template>
	<view class="listcontent">
		<view class="contelis">
			<view class="titles">
				管理博客
				<view class="backs" @click="backgs"> <返回</view>
			</view>
			<view class="searcher">
				<view class="categray" style="flex: none; width: 100px;">
					<u-button @click="show = true">{{label}}</u-button>
				</view>
				<view class="categray" style="flex:1; padding: 0 20px; box-sizing: border-box;"><u-input v-model="searches" :focus="true" :border="true" placeholder="请输入搜索内容" class="bg" :trim="true" :clearable="false"/></view>
				<view class="categray" style="flex: none; width: 300px; display: flex;">
					<u-button @click="getblogslist" >搜索</u-button>
					<u-button @click="gotoadd">添加博客</u-button>
					<u-button @click="gotoaddcate">分类</u-button>
				</view>
			</view>
			
			<view class="tables">
				<u-table>
					<u-tr>
						<u-th>编号</u-th>
						<u-th>分类</u-th>
						<u-th>标题</u-th>
						<u-th>操作</u-th>
					</u-tr>
					<u-tr v-for="(item,index) in datalists" :key="index">
						<u-td>{{index+1}}</u-td>
						<u-td>{{item.cname}}</u-td>
						<u-td>{{item.title}}</u-td>
						<u-td>
							<view style="display: flex; justify-content: center;" class="textu">
								<text><u-icon name="edit-pen" @click="editedatas(item)"></u-icon></text>
								<text><u-icon name="trash" @click="del(item.Id)"></u-icon></text>
							</view>
						</u-td>
					</u-tr>
					<!-- <u-tr>
						<u-td>1</u-td>
						<u-td>二年级二年级二年级</u-td>
						<u-td>
							<view style="display: flex; justify-content: center;" class="textu">
								<text><u-icon name="edit-pen"></u-icon></text>
								<text><u-icon name="trash"></u-icon></text>
							</view>
						</u-td>
					</u-tr> -->
				</u-table> 
			</view> 
			
		</view>
		<u-select v-model="show" :list="clists"  @confirm="confirm"></u-select>
		<u-modal v-model="shows" @confirm="confirm1" style="text-align: center; padding: 20px 0;" :show-cancel-button="true" >确定删除吗？</u-modal>
	</view>
</template>

<script>
	import api from '../../api/api.js';
	import {mapGetters,mapMutations} from 'vuex';
	export default {
		data(){
			return {
				show:false,
				searches:'',
				label:'分类',
				cid:'',
				shows:false,
				clists:[],
				datalists:[],
				list: [
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			}
		},
		computed: {
			...mapGetters(['editedataz'])
		},
		methods:{
			...mapMutations(['editedataes']),
			editedatas(item){
				this.editedataes(item);
				uni.navigateTo({
					url:"/pages/manage/edietblogs"
				})
			},
			del(obj){
				this.shows=!this.shows;
				uni.setStorageSync('ids',obj);
			},
			confirm1(){
				const datas = {
					id:uni.getStorageSync('ids')
				}
				api.dels(datas).then((res)=>{
					uni.showToast({
						title:res.msg,
						icon: 'none',
					});
					this.getblogslist();
				})
			},
			backgs(){
				uni.navigateBack();
			},
			confirm(e) {
				console.log(e);
				this.label = e[0].label;
				this.cid = e[0].value;
			},
			gotoadd(){
				uni.navigateTo({
					url:"/pages/manage/add"
				})
			},
			gotoaddcate(){
				uni.navigateTo({
					url:"/pages/manage/categroy"
				})
			},
			getblogslist(){
				const datas = {
					uid:uni.getStorageSync('uid'),
					cid:this.cid,
					searches:this.searches
				}
				api.getblogslist(datas).then((res)=>{
					console.log(res);
					this.datalists=res.data;
				})
			},
			autoplays(){
				api.clist().then((res)=>{
					console.log(res);
					res.data.forEach((item)=>{
						this.clists.push({
							value: item.Id,
							label: item.cname
						})
					})
				})
			},
		},
		onLoad() {
			this.getblogslist();
			this.autoplays();
		}
	}
</script>

<style>
	.listcontent{background: #27ae60; width: 100%; overflow-y:scroll; height: 100vh; ;}
	.contelis{ width: 900px; margin: 0 auto; background-color: #fff; height: 100vh; overflow-y: scroll;}
	.titles{  background-color: #ccc; height: 150px; line-height: 150px;text-align: center; font-size: 20px; position: relative;}
	.backs{ position: absolute; left: 50px; top: 20px; font-size: 18px; height: 30px; line-height: 30px;}
	.searcher{ height: 80px; line-height: 80px; background: #007AFF; display: flex; padding: 0 20px; box-sizing: border-box;}
	.categray{ margin-top: 20px;}
	.tables{ margin-top: 30px; padding:0 20px; box-sizing: border-box;}
	.textu text{ padding: 0 12px;}
</style>
